<template>
  <div class="product-template-list-view">

    <!-- start content -->
    <div class="product-template-list-content">
     
      <!-- start 表格 -->
      <el-table
        :data="page.list"
        :row-key="getRowKey"
        stripe
        border
        :highlight-current-row="false"
        header-row-class-name="product-template-table-header"
        ref="productTemplateTable"
        class="product-template-table email-table"
        height="300"
      >
        <el-table-column
          v-for="column in columns"
          :key="column.field"
          :label="column.label"
          :prop="column.field"
          :width="column.width"
          :min-width="column.minWidth || '120px'"
          :sortable="column.sortable"
          show-overflow-tooltip
          :align="column.align"
        >
          <template slot-scope="scope">

            <template v-if="column.field === 'createTime'">{{ formatTime(scope.row.createTime) }}</template>
            <template v-else-if="column.field === 'paidTime'">{{ formatTime(scope.row.paidTime) }}</template>
            <template v-else-if="column.field === 'payStatus'">
              <template v-if="scope.row.payStatus === 'wait'">
                <span class="link" @click="payHandle(scope.row.orderId)">待支付</span>
              </template>
              <template v-else>
                {{formatStatus(scope.row.payStatus)}}
              </template>

             
            </template>
            <template v-else>{{scope.row[column.field]}}</template>
          </template>
        </el-table-column>
      </el-table>
      <!-- end 表格 -->

      <!-- start 表格底部 -->
      <div class="table-footer">
        <div class="list-info">
          共
          <span class="level-padding">{{ page.total || 0 }}</span>记录
        </div>
        <el-pagination
          class="product-template-table-pagination"
          background
          @current-change="jump"
          @size-change="handleSizeChange"
          :page-sizes="defaultTableData.defaultPageSizes"
          :page-size="page.pageSize"
          :current-page="page.pageNum"
          layout="prev, pager, next, sizes, jumper"
          :total="page.total"
        ></el-pagination>
      </div>
      <!-- end 表格底部 -->

    </div>
    <!-- end content -->

  </div>

</template>

<script>
import Page from '@model/Page';
import { formatDate, objectDateToTimestamp } from 'pub-bbx-utils';
import platform from '@src/platform';
import * as PayApi from '@src/api/PayApi';
import {payHandle} from '@src/util/recharge'
import { defaultTableData } from '@src/util/table'

export default {
  name: 'sms-pay-record',
  props: {
    date: {
      type: Array,
      default: ()=>[]
    },
  },
  data() {
    return {
      defaultTableData,
      columns: [], // 列
      page: new Page(), // page 对象
      searchModel: {
        pageSize: 10,
        pageNum: 1,
      },
      payHandle,
    };
  },
  mounted() {
    this.columns = [
      {
        label: '下单时间',
        field: 'createTime',
        show: true,
        fixed: true,
      },
      {
        label: '套餐内容',
        field: 'packContent',
        show: true,
        fixed: true,
      },
      {
        label: '支付金额(元)',
        field: 'paymentAmount',
        show: true,
        fixed: true,
      },
      {
        label: '付款时间',
        field: 'paidTime',
        show: true,
        fixed: true,
      },
      {
        label: '订单状态',
        field: 'payStatus',
        show: true,
        fixed: true,
      },
    ]
    this.$nextTick(()=>{
      this.search();
    });
  },
  methods: {
    pay(id){
      // 待支付
      platform.openLink(`/pay/sms/re?id=${id}`)
    },
    formatTime(val) {
      if (!val) return '';
      val = +val; // 这里需要把后端返回的字符串转成number
      return formatDate(val, 'YYYY-MM-DD HH:mm:ss');
    },
    formatStatus(status) {
      if (!status) return '';
      let res;
      switch (status) {
      case 'wait':
        res = '待支付'; 
        break;
      case 'succ':
        res = '支付成功'; 
        break;
      case 'fail':
        res = '支付失败'; 
        break;
      case 'free':
        res = '免支付'; 
        break;
      default:
        break;
      } 
      return res; 
    },

    buildParams() {
      const sm = Object.assign({}, this.searchModel);
      let params = {
        pageSize: sm.pageSize,
        pageNum: sm.pageNum
      };
      params.commodityCode = 'smsRecharge'; // 短信商品码
      params.createTimeStart = (this.date[0]);
      params.createTimeEnd = this.date[1];
      objectDateToTimestamp(params, ['timeStart', 'timeEnd'])
      return params;
    },
  
    // 页码数切换
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize;
      this.searchModel.pageNum = 1;
      this.search();
    },
    // 跳转
    jump(pageNum) {
      this.searchModel.pageNum = pageNum;
      this.search();
    },
    // 搜索
    search(pageNum) {
      pageNum && (this.searchModel.pageNum = pageNum);
      const params = this.buildParams();
      return  PayApi.queryPageInfo(params)
        .then(res => {
          this.page = res.data;
        });
    },
    getRowKey(row) {
      return row.id;
    },
  },
};
</script>

<style lang="scss" scoped>
.product-template-list-content .email-table {
  padding: 0;
}
.error-text {
  color: #e51c23;
}
.success-text {
  color: #0db3a6;
}
.loading-text {
  color: #259b24;
}
.view-detail{
  color: $color-primary;
}
.mail-receiver {
  display: flex;
  i {
    color: #faae14;
    margin-left: 4px;
    margin-right: 2px;
  }
}
.link {
  color: $color-primary;
  cursor: pointer;
}
</style>